<!--
 * @Author: your name
 * @Date: 2021-08-16 21:07:43
 * @LastEditTime: 2021-08-24 00:22:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hqbAdmin\src\components\analyse\loanMarketAnalyse.vue
-->
<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计分析</el-breadcrumb-item>
      <el-breadcrumb-item>  统计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <!-- <el-input v-model="custId" placeholder="租超名称"></el-input> -->
          <el-select
            clearable
            v-model="queryParms.loanMarketId"
            filterable
            default-first-option
            placeholder="请选择租超"
          >
            <el-option
              v-for="item in queryBindData.loanMarketData"
              :key="item.id"
              :label="item.dcName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <!-- <el-col :span="3">
					<el-input v-model="seachlist.loanNo" placeholder="借据号"></el-input>
				</el-col> -->

        <el-col :span="17">
          <el-date-picker
            v-model="time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="changeDate"
          >
          </el-date-picker>
          &nbsp;&nbsp;
          <el-button type="primary" @click="listMarketAnalyse">搜索</el-button>
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="listData"
        border
        stripe
        show-summary
        :summary-method="getSummaries" @sort-change="sortChange"
      >
        <el-table-column label="日期" prop="time" 
          sortable="custom"></el-table-column>
        <el-table-column
          label="租超名称"
          prop="loanMarketName"
        ></el-table-column>
        <el-table-column
          label="点击"
          prop="clickCount"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          label="单价"
          prop="unitPrice"
        ></el-table-column>
        <el-table-column
          label="收益"
          prop="earnings"
        ></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParms.pageCount"
        :page-size="queryParms.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- <div style="text-align: right;font-size: 16px;margin-top: 0.625rem;">总金额：{{totalLoanAmount|NumFormat}}元</div> -->
    </el-card>
  </div>
</template>

<script>
export default {
  name: "loanMarketAnaylse",
  data() {
    return {
      queryBindData: {
        loanMarketData: [],
      },
      queryParms: {
        loanMarketId: "",
        startTime: "",
        endTime: "",
        pageCount: 1,
        pageSize: 10,
        sortCol: "time",
        sort: "desc",
      },
      time: [],
      listData: [],
      total: 0,
    };
  },
  created() {
    this.listMarket();
  },
  methods: {
    async listMarket() {
      const { data: res } = await this.$http.post("/loanMarket/list", {
        name: "",
        status: "1",
        pageCount: 1,
        pageSize: 999,
      });
      this.queryBindData.loanMarketData = res.data.records;
    },
    async listMarketAnalyse() {
      if (this.queryParms.startTime == "" || this.queryParms.endTime == "") {
        this.$message.error("查询日期不可为空！");
        return;
      }

      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const { data: res } = await this.$http.post(
        "/loanMarket/loanMarketAnalyse",
        this.queryParms
      );
      setTimeout(() => {
        loading.close();
      }, 500);
      // console.log(res);
      this.listData = res.data.records;
      this.total = res.data.total;
    },
    async exportExcel() {
      if (this.queryParms.startTime == "" || this.queryParms.endTime == "") {
        this.$message.error("查询日期不可为空！");
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      await this.$http({
        method: "post",
        url: "/loanMarket/loanMarketAnalyseExport",
        data: this.queryParms,
        responseType: "blob",
      })
        .then((response) => {
          this.download(response.data);

          setTimeout(() => {
            loading.close();
          }, 500);
        })
        .catch((error) => {});
    },
    download(data) {
      if (!data) {
        return;
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", "租超统计.xls");
      document.body.appendChild(link);
      link.click();
    },
    changeDate() {
      this.queryParms.startTime = this.time[0];
      this.queryParms.endTime = this.time[1];
    },
    handleSizeChange(val) {
      this.queryParms.pageSize = val;
      this.listMarketAnalyse();
    },
    handleCurrentChange(val) {
      this.queryParms.pageCount = val;
      this.listMarketAnalyse();
    },
    getSummaries(param) {
      const { columns, data } = param;
      console.info(param);
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 1 || index === 3) {
          sums[index] = "";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += "";
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
    sortChange({ column, prop, order }) {
      this.queryParms.sortCol = prop;
      this.queryParms.sort = order == "descending" ? "desc" : "asc";
      this.queryParms.pageCount = 1;
	  this.listMarketAnalyse();
    },
  },
};
</script>

<style>
</style>
